<template>
  <el-dialog v-if="load" title="销量" v-model="visible" append-to-body :close-on-click-modal="false" :z-index="2000" width="1200px" @close="handleClose">
    <div class="flex items-center gap-3">
      <VDate v-model="form.date" type="daterange" :clearable="false" />
      <el-button type="primary" @click="query">查询</el-button>
    </div>
    <div class="text-[16px] font-bold mt-3 mb-2">sku+国家销量</div>
    <el-tabs v-model="form.activeName1" size="small">
      <el-tab-pane label="表格查看" name="1">
        <div class="grid grid-cols-10 border-l base-border">
          <div v-for="(d, i) in form.country_sale" class="border-r border-b" :key="i" :class="{'border-t': i < 10}">
            <div class="border-b p-1 text-center text-[#333] dark:text-[#eee]">{{ d.date }}</div>
            <div class="p-1 text-center">
              <div :class="d.quantity ? 'text-[#0A14FF]' : 'text-[#333] dark:text-[#eee]'">{{ d.quantity }}</div>
              <VText v-for="p in d.platform_detail" :key="p.platform" :title="p.platform" :value="p.quantity" />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="趋势图查看" name="2">
        <VChart :data="{ x: form.country_sale.map(d => d.date), y: form.country_sale.map(d => d.quantity) }" width="770px" height="280px" />
      </el-tab-pane>
    </el-tabs>
    <div class="text-[16px] font-bold mt-3 mb-2">sku+国家+仓库销量</div>
    <vxe-table :data="form.sale">
      <vxe-column title="SKU" field="sku"></vxe-column>
      <vxe-column title="国家" field="country_name"></vxe-column>
      <vxe-column title="仓库名称" field="delivery_warehouse_name"></vxe-column>
      <vxe-column title="销量" field="quantity"></vxe-column>
      <vxe-column title="可用库存" field="oversea_num"></vxe-column>
    </vxe-table>
    <el-tabs v-model="form.activeName" size="small">
      <el-tab-pane label="表格查看" name="1">
        <template v-for="(da, idx) in form.warehouse_sale" :key="idx">
          <div class="text-[16px] font-bold mt-3 mb-2">{{ da.warehouse_name }}</div>
          <div class="grid grid-cols-10 border-l">
            <div v-for="(d, i) in da.sale" :key="i" class="border-r border-b" :class="{'border-t': i < 10}">
              <div class="border-b p-1 text-center text-[#333] bg-gray-100">{{ d.date }}</div>
              <div class="p-1 text-center">
                <div :class="d.quantity ? 'text-[#0A14FF]' : 'text-[#333]'">{{ d.quantity }}</div>
                <VText v-for="p in d.platform_detail" :key="p.platform" :title="p.platform" :value="p.quantity" />
              </div>
            </div>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="趋势图查看" name="2">
        <template v-for="(da, idx) in form.warehouse_sale" :key="idx">
          <div class="text-[16px] font-bold mt-2">{{ da.warehouse_name }}</div>
          <VChart :data="{ x: da.sale.map(d => d.date), y: da.sale.map(d => d.quantity) }" width="770px" height="280px" />
        </template>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import VChart from '@/components/VChart'
import XEUtils from 'xe-utils'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const api = inject('api')
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const form = reactive({
  data: [],
  activeName: '1',
  activeName1: '1',
  sale: [],
  country_sale: [],
  warehouse_sale: {}
})
const type = inject('type')

const query = async () => {
  const { sku, country, date, warehouse_id, sale_id } = form
  const [start, end] = date
  const res = await api.getSale({ sku, country, payment_time: { start, end }, type, warehouse_id, sale_id })
  const { sale, warehouse_sale, country_sale } = res.data
  form.sale = sale
  form.warehouse_sale = warehouse_sale
  form.country_sale = country_sale
}

// 打开弹窗
const open = async (row) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  visible.value = true

  const end = XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
  const start = XEUtils.toDateString(XEUtils.getWhatDay(end, -30), 'yyyy-MM-dd')
  const { sku, country, warehouse_id, sale_id } = row
  form.sku = sku
  form.warehouse_id = warehouse_id
  form.sale_id = sale_id
  form.country = country
  form.activeName = '1'
  form.activeName1 = '1'
  form.date = [start, end]
  query()
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>